/*设置元素字体大小 */
.switch{
    position: relative;
    line-height: 24px;
    color: #fff;
    width: 48px;
    height: 24px;
    margin: 0 auto;
}
.switch .open,.switch .bclose{
    position: absolute;
    top: 0px;
    left: 8px;
    font-size: 12px;
    cursor: pointer;
    padding: 0px;
}
.switch .bclose{
    left:28px;
}
/*label标签模拟按钮  */
.switch_btn {
    display: block;
    width: 48px;
    height: 24px;
    background: #a1a1a1;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

/*设置伪类,来实现模拟滑块滑动*/

.switch_btn:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    position: absolute;
    left: 2px;
    top: 2px;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 2;
}

.switch_btn:active:after {
    width: 24px;
}
/*根据checkbox状态实现滑动*/
.chk_move{
    height:10px;
    width:10px;
    display: none !important;
}

.chk_move:checked+label {
    background: #028ead;
}

.chk_move:checked+label:after {
    left: 26px;
}

.chk_move:checked+label:active:after {
    left: 30px;
}